const stats = new Stats();
stats.showPanel(0);
document.body.appendChild(stats.dom);

const setting = {
    ballNum: 1,
    isTail: "false",
    t:0.1
};

const gui = new dat.GUI({ width: 320 });
const folder = gui.addFolder("基础");
folder.open();

function Ball(hue, size) {
    this.start = { x: 0, y: 0 };
    this.end = { x: 0, y: 0 };
    this.pos = { x: 0, y: 0 };
    this.draw = () => {
        fill(hue, 100, 100);
        circle(this.pos.x, this.pos.y, size);
    };
    this.update = () => {
        setting.t +=0.1
        this.pos.x = this.start.x * (1 - setting.t) + this.end.x * setting.t;
        this.pos.y = this.start.y * (1 - setting.t) + this.end.y * setting.t;
        this.draw();
        console.log(this);
    };
}

let balls = [];

function initBalls() {
    balls=[]
    for (let i = 0; i < setting.ballNum; i++) {
        const hue = floor(random(100))
        const size = floor(random(20, 40))
        const ball = new Ball(hue, size)
        ball.end = { x: width / 2, y: height / 2 }
    }
}

function setup() {
    createCanvas(innerWidth, innerHeight);
    noStroke();
    frameRate(60);
    colorMode(HSB, 100);
    background(0);
    initBalls();
}

function draw() {
    stats.begin();
    if (setting.isTail === "true") {
        background(0, 0.8);
    } else {
        clear();
        background(0);
    }
    balls.forEach((ball) => {
        ball.update();
        console.log(ball);
    });
    stats.end();
}
